{extend name="public/base" /}

{block name="content"}
    <div class="row">
        <div class="col-sm-12 col-md-12" style="margin-bottom: 20px;">
            <h1 class="article-title" style="text-align: center;color: #1E9FFF;">{$articleInfo.title}</h1>
            <div class="status" style="text-align: center;">
                <p>
                    {$articleInfo.views}阅读
                    &nbsp;&nbsp; {$articleInfo.comment_num}评论
                    &nbsp;&nbsp; 作者：{$articleInfo.author}
                </p>

                <!-- 文章标签 -->
                {volist name="articleInfo.tags|str_to_array" id="tag" }
                    {if $tag != ""}
                        <span class="label label-default">{$tag}</span>
                    {/if}
                {/volist}
            </div>
            <div class="article-content">
                <blockquote>
                    <span style="color: #80d6ef">概述：</span>
                    <p style="text-indent: 2em;">{$articleInfo.desc}</p>
                </blockquote>
                <div class="typo" style="padding: 15px 0;">
                    {$articleInfo.content|raw}
                </div>
            </div>

            <!-- 评论 -->
            <div class="article-comment">
                <div class="page-header"><b>相关评论</b></div>
                <div class="comment-content">
                    <form id="form">
                        <input type="hidden" name="article_id" value="{$articleInfo.id}">
                        <input type="hidden" name="member_id" value="{:session('member.id')}">
                        <div class="form-group">
                            <textarea class="form-control" id="content" name="content" rows="5" cols=""></textarea>
                        </div>
                        <div class="form-group pull-right">
                            <button type="button" class="btn btn-primary" id="comment">评论（请认真评论）</button>
                        </div>
                    </form>
                </div>
                <div class="clearfix"></div>
                <div class="comment-list">
                    {volist name="articleInfo.comments" id="comment"}
                        <div class="comment-list-item">
                            <div class="info">{$comment.member.nickname}<small>{$comment.create_time}</small></div>
                            <div class="content">{$comment.content}</div>
                        </div>
                    {/volist}
                </div>

            </div>
        </div>

    </div>

{/block}

{block name="js"}
    <script src="/static/index/js/prism.js"></script>

    <script>
        // 提交评论
        $("#comment").click(function () {
            // 判断是否登录
            if ("{:session('?member.id')}"){  // 已登录
                 $.ajax({
                    url: "{:url('index/article/comment')}",
                    type: 'post',
                    dataType: 'json',
                    data: $("#form").serialize(),
                    success: function (data) {
                        if (data.code == 1){
                            layer.msg("评论成功", {
                                icon: 6,
                                time: 500
                            }, function () {
                                location.reload();
                            });
                        }else {
                            layer.open({
                                title: '评论失败',
                                content: data.msg,
                                icon: 5,
                                anim: 6
                            });
                        }

                    }
                });
            }else { //未登录
                layer.msg("请先登录", {
                    icon: 5,
                    time: 500
                }, function () {
                    location.href = "{:url('index/index/login')}";
                });
            }
        });
    </script>


{/block}